<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
    
        
    <ui:define name="head">
        <style type="text/css">

        </style>
        
        <script type="text/javascript">
//<![CDATA[

//]]>
        </script>
    </ui:define>
        
	<ui:define name="content">
		<h1 class="title ui-widget-header ui-corner-all">Overlay Panel</h1>
		<div class="entry">
			<p>OverlayPanel is a generic container component that can overlay other components on page. Notable features are
            custom positioning, configurable events and effects. Lazy content loading to reduce page load time is also supported via dynamic option, when enabled
            overlayPanel will load the contents just before being shown.</p>

			<h:form id="form">
                
                <p:commandButton id="chartBtn" value="Basic" type="button" />
                
                <p:overlayPanel id="chartPanel" for="chartBtn" hideEffect="fade">
                    <p:pieChart id="chart" value="#{chartBean.pieModel}" legendPosition="w"
                        title="Sample Pie Chart" style="width:300px;height:200px" />
                </p:overlayPanel>
                
                <br /><br />
                
                <p:commandButton id="carBtn" value="Dynamic" type="button" />

                <p:overlayPanel id="carPanel" for="carBtn" hideEffect="fade" dynamic="true">
                    <p:dataTable id="table" var="car" value="#{tableBean.cars}" rows="10" paginator="true">
                        <p:column headerText="Model">
                            <h:outputText value="#{car.model}" />
                        </p:column>

                        <p:column headerText="Year">
                            <h:outputText value="#{car.year}" />
                        </p:column>

                        <p:column headerText="Manufacturer">
                            <h:outputText value="#{car.manufacturer}" />
                        </p:column>

                        <p:column headerText="Color">
                            <h:outputText value="#{car.color}" />
                        </p:column>
                    </p:dataTable>
                </p:overlayPanel>

                <br /><br />
				
                <p:graphicImage id="img" value="../images/images.png" style="cursor:pointer" title="Custom Options"/>
                
                <p:overlayPanel id="imgPanel" for="img" showEffect="blind" hideEffect="explode" showEvent="mouseover" hideEvent="mousedown"
                                dismissable="false" showCloseIcon="true">
                    <p:imageSwitch id="imgSwitch" effect="fade" style="width:300px;height:188px;">
                        <ui:repeat value="#{imageSwitchBean.images}" var="image">
                            <p:graphicImage value="/images/#{image}" width="300"/>
                        </ui:repeat>
                    </p:imageSwitch>
                </p:overlayPanel>
			</h:form>
	
		<h3>Source</h3>
        <p:tabView>
            <p:tab title="overlayPanel.xhtml">
                <pre name="code" class="xml">
&lt;h:form id="form"&gt;
                
    &lt;p:commandButton id="chartBtn" value="Basic" type="button" /&gt;

    &lt;p:overlayPanel id="chartPanel" for="chartBtn" hideEffect="fade"&gt;
        &lt;p:pieChart id="chart" value="\#{chartBean.pieModel}" legendPosition="w"
            title="Sample Pie Chart" style="width:300px;height:200px" /&gt;
    &lt;/p:overlayPanel&gt;

    &lt;p:commandButton id="carBtn" value="Dynamic" type="button" /&gt;

    &lt;p:overlayPanel id="carPanel" for="carBtn" hideEffect="fade" dynamic="true"&gt;
        &lt;p:dataTable id="table" var="car" value="\#{tableBean.cars}" rows="10" paginator="true"&gt;
            &lt;p:column headerText="Model"&gt;
                &lt;h:outputText value="\#{car.model}" /&gt;
            &lt;/p:column&gt;

            &lt;p:column headerText="Year"&gt;
                &lt;h:outputText value="\#{car.year}" /&gt;
            &lt;/p:column&gt;

            &lt;p:column headerText="Manufacturer"&gt;
                &lt;h:outputText value="\#{car.manufacturer}" /&gt;
            &lt;/p:column&gt;

            &lt;p:column headerText="Color"&gt;
                &lt;h:outputText value="\#{car.color}" /&gt;
            &lt;/p:column&gt;
        &lt;/p:dataTable&gt;
    &lt;/p:overlayPanel&gt;

    &lt;p:graphicImage id="img" value="../images/images.png" style="cursor:pointer" title="Custom Options"/&gt;

    &lt;p:overlayPanel id="imgPanel" for="img" showEffect="blind" hideEffect="explode" showEvent="mouseover" hideEvent="mousedown"
                dismissable="false" showCloseIcon="true"&gt;
        &lt;p:imageSwitch id="imgSwitch" effect="fade" style="width:300px;height:188px;"&gt;
            &lt;ui:repeat value="\#{imageSwitchBean.images}" var="image"&gt;
                &lt;p:graphicImage value="/images/\#{image}" width="300"/&gt;
            &lt;/ui:repeat&gt;
        &lt;/p:imageSwitch&gt;
    &lt;/p:overlayPanel&gt;
&lt;/h:form&gt;
                </pre>
            </p:tab>
        </p:tabView>

		</div>

	</ui:define>
</ui:composition>
